<div class="container">
	<div class="page-header-small page-header-with-button">
		<h1><span data-i18n="Notifications">Notifications</span>: {{ ::vm.pageName }}</h1>
        <div><a class="btnstyle3" back-button><i class="fa fa-reply" title="Back"></i>&nbsp;<span data-i18n="Back"></span></a></div>
	</div>

    <device-notifications-table
            device="vm.device"
            notifications="vm.notifications"
            on-select="vm.selectNotification(value)"
    ></device-notifications-table>

    <div class="page-content-container">
        <device-notification-form
                ng-if="::vm.isLoaded"
                notification-types="::vm.notificationTypes"
                notifiers="::vm.notifiers"
                device="::vm.device"
                ng-model="vm.notification"
        ></device-notification-form>

        <table id="updelclr" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td style="padding: 3px 10px; width: 160px;">&nbsp;</td>
                <td style="padding: 3px 10px;">
                    <button class="btnstyle3" data-i18n="Add" ng-click="vm.addNotification()"></button>
                    <button class="btnstyle3" data-i18n="Update" ng-click="vm.updateNotification()" ng-disabled="!vm.notification.idx"></button>
                    <button class="btnstyle3" data-i18n="Delete" ng-click="vm.deleteNotification()" ng-disabled="!vm.notification.idx"></button>
                </td>
                <td align="right" style="padding-right: 10px;">
                    <button class="btnstyle3" data-i18n="Clear" ng-click="vm.clearNotifications()"></button>
                </td>
            </tr>
        </table>
    </div>
</div>

<script type="text/ng-template" id="app/notifications/notificationForm.html">
    <table class="display table-details table-details-lg">
        <tr>
            <td>
                <label for="checkactive" data-i18n="Enabled"></label>:
            </td>
            <td>
                <div id="id_checkactive">
                    <input type="checkbox"
                           id="checkactive"
                           ng-model="$ctrl.notification.active"
                           ng-change="$ctrl.updateViewValue()"
                    >&nbsp;
                    <label for="checkactive"></label>
                </div>
            </td>
        </tr>

        <tr>
            <td>
                <label for="combotype" data-i18n="Type"></label>:
            </td>
            <td>
                <select id="combotype"
                        class="combobox ui-corner-all"
                        style="width:120px"
                        ng-model="$ctrl.notification.type"
                        ng-change="$ctrl.updateViewValue()"
                        ng-options="item.ptag as item.text | translate for item in ::$ctrl.notificationTypes"
                ></select>
            </td>
        </tr>

        <tr ng-if="::$ctrl.levelOptions" ng-show="$ctrl.notification.type == 'S'">
            <td>
                <label for="combolevel" data-i18n="Level"></label>:
            </td>
            <td>
                <select id="combolevel"
                        class="combobox ui-corner-all"
                        style="min-width:50px"
                        ng-model="$ctrl.notification.level"
                        ng-change="$ctrl.updateViewValue()"
                        ng-options="item.value as item.label for item in ::$ctrl.levelOptions"
                ></select>
            </td>
        </tr>

        <tr ng-show="$ctrl.isAdditionalOptionsAvailable()">
            <td>
                <label for="combowhen" data-i18n="When"></label>:
            </td>
            <td>
                <select id="combowhen"
                        style="min-width:120px"
                        class="combobox ui-corner-all"
                        ng-model="$ctrl.notification.condition"
                        ng-change="$ctrl.updateViewValue()"
                        ng-options="key as value for (key, value) in ::$ctrl.conditionOptions"
                ></select>
            </td>
        </tr>

        <tr ng-show="$ctrl.isAdditionalOptionsAvailable()">
            <td>
                <label for="value" data-i18n="Value"></label>:
            </td>
            <td>
                <input type="text"
                       id="value"
                       style="width: 50px; padding: .2em;"
                       class="text ui-widget-content ui-corner-all"
                       ng-model="$ctrl.notification.level"
                       ng-change="$ctrl.updateViewValue()"
                >
                <label for="value">&nbsp;{{ $ctrl.getValueUnit() }}</label>
            </td>
        </tr>

        <tr>
            <td>
                <label for="combopriority" data-i18n="Priority"></label>:
            </td>
            <td>
                <select id="combopriority"
                        style="width:120px"
                        class="combobox ui-corner-all"
                        ng-model="$ctrl.notification.priority"
                        ng-change="$ctrl.updateViewValue()"
                        ng-options="key-2 as value for (key, value) in ::$ctrl.priorityOptions"
                ></select>
            </td>
        </tr>

        <tr>
            <td>
                <label for="checkalways" data-i18n="Ignore Interval"></label>:
            </td>
            <td>
                <div id="id_checkalways">
                    <input type="checkbox"
                           id="checkalways"
                           ng-model="$ctrl.notification.ignoreInterval"
                           ng-change="$ctrl.updateViewValue()"
                    >&nbsp;
                    <label for="checkalways">({{:: 'If enabled, it will bypass the Notification interval specified in the Settings page' | translate }})</label>
                </div>
            </td>
        </tr>

        <tr ng-show="$ctrl.isAdditionalOptionsAvailable()">
            <td>
                <label for="checkrecovery" data-i18n="Recovery Notification"></label>:
            </td>
            <td>
                <div id="id_checkrecovery">
                    <input type="checkbox"
                           id="checkrecovery"
                           ng-model="$ctrl.notification.sendRecovery"
                           ng-change="$ctrl.updateViewValue()"
                    >&nbsp;
                    <label for="checkrecovery">({{:: 'If enabled, a notification will be send when given condition has been recovered' | translate }})</label>
                </div>
            </td>
        </tr>

        <tr>
            <td>
                <label for="custommessage" data-i18n="Custom Message"></label>:
            </td>
            <td>
                <input type="text"
                       id="custommessage"
                       class="text ui-widget-content ui-corner-all"
                       style="width: 350px; padding: .2em;"
                       ng-model="$ctrl.notification.customMessage"
                       ng-change="$ctrl.updateViewValue()"
                >&nbsp;
                <span data-i18n="(Optional)"></span>
            </td>
        </tr>
        <tr style="vertical-align:top">
            <td>
                <label for="custommessage" data-i18n="Action"></label>:
            </td>
            <td>
                <textarea id="customaction"
                          rows="4"
                          class="text ui-widget-content ui-corner-all"
                          style="width: 356px; padding: .2em;"
                          ng-model="$ctrl.notification.customAction"
                          ng-change="$ctrl.updateViewValue()"
                          >
                </textarea>&nbsp;<span data-i18n="(Optional)"></span><br>
                <span data-i18n="(Should start with http:// or script://)"><span><span> #MESSAGE</span>
            </td>
        </tr>
        <tr>
            <td>
                <label data-i18n="Active Systems"></label>:
            </td>
            <td>
                <div ng-repeat="item in ::$ctrl.notifiers">
                    <input
                            type="checkbox"
                            id="{{:: item.description}}"
                            ng-model="$ctrl.notification.systems[item.name]"
                            ng-change="$ctrl.updateViewValue()"
                    >
                    <label for="{{:: item.description}}">{{:: item.name }}</label>
                </div>
            </td>
        </tr>
    </table>
</script>